<template>
  <van-progress
      style="margin: 20px"
      :percentage="teamList.length / 5 * 100"
      :pivot-text="`加入${teamList.length}/5个队伍`"
      pivot-color="#7232dd"
      color="linear-gradient(to right, #be99ff, #7232dd)"
  />
  <team-list :team-list="teamList" :login-user-id="loginUserId" :loading="loading" @getTeamList="getTeamList" :is-mine="true"/>
</template>

<script setup lang="ts">
import TeamList from "../components/TeamList.vue";
import {onMounted, ref} from "vue";
import {TeamType} from "../models/team";
import myAxios from "../plugins/myAxios";

const loading = ref(false);
const teamList = ref<TeamType[]>([]);
const loginUserId = ref(null);
const getTeamList = async () => {
  const res = await myAxios.get('/user-manage/currentUser') as any;
  if (res) {
    loginUserId.value = res.data.id;
    const response = await myAxios.post('/team-manage/mine');
    loading.value = false;
    if (response.data) {
      teamList.value = response.data;
    }
  }
};
onMounted(() => {
  getTeamList();
});
</script>
